<template>
  <div>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        mode="default"
        @onCreated="handleCreated"
        @onChange="handleChange"
      />
    </div>
  </div>
</template>
<script setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import {
  onBeforeUnmount,
  ref,
  shallowRef,
  onMounted,
  defineEmits,
  defineProps,
  watch,
} from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const props = defineProps({
  content: String,
});
watch(() => props.content,(newVal,oldVal) => {
  console.log('content改变了',newVal)
  // valueHtml.value = newVal
})
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();
const emit = defineEmits(["event"]);
// console.log('emit',emit)
// 内容 HTML
const valueHtml = ref("");

// 模拟 ajax 异步获取内容
// onMounted(() => {
//   console.log("valueHtml.value", props.content === "<p>31231</p>");
//   const data = props.content;
//   console.log("data", data);

//   setTimeout(() => {
//     valueHtml.value = data;
//   }, 1500);
// });
const handleChange = () => {
  emit("event", valueHtml._value);
};
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  // console.log("editor", editor);
};
</script>